<!--
 * @Date: 2022-04-10 13:22:58
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-08-05 09:36:26
 * @FilePath: \imitation-microblog-vue\src\components\createWeiBo\index.vue
 * @Description: 微博编辑文本框      
-->
<template>
  <div class="wirteArea" v-if="store.state.isLogin">
    <div class="textArea">
      <!-- <div class="test"></div> -->
      <el-input
        v-model="textarea"
        class="elInput"
        :rows="5"
        type="textarea"
        placeholder="有什么新鲜事分享给大家？支持markdown格式"
      />
    </div>
    <div class="optionContain">
      <div class="tools">
        <div class="icon" @click="isShowChooseImg = !isShowChooseImg">
          <i class="iconfont icon-tupian"></i>
        </div>
        <emoji @getEmoji="getEmoji">
          <div class="icon">
            <i class="iconfont icon-emoji"></i>
          </div>
        </emoji>
        <div class="icon">
          <at></at>
        </div>
      </div>
      <el-button
        type="warning"
        plain
        :disabled="disabled"
        round
        @click="submitBlog"
        >发送</el-button
      >
    </div>
    <choose-img
      v-if="isShowChooseImg"
      @closeChooseImg="closeChooseImg"
      @handlerSuccess="handlerSuccess"
      @haveFile="haveFile"
      ref="Chooimg"
    >
    </choose-img>
  </div>
  <div
    class="showBlog"
    v-infinite-scroll="loadMoreBlog"
    :infinite-scroll-disabled="disabledLoad"
  >
    <div v-for="(item, index) in BlogList" :key="index">
      <wei-bo-content-card
        :BlogBaseInfo="item"
        @getfansAndFollowing="getfansAndFollowing"
      ></wei-bo-content-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import emoji from "../emoji/index.vue";
import chooseImg from "../chooseIMG/index.vue";
import debounce from "lodash/debounce";
import { BlogListType, FanslistType, followListType } from "./types";
import {
  computed,
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  ref,
  watch,
} from "vue";
import weiBoContentCard from "../weiBoContentCard/index.vue";
import At from "../At/index.vue";
import { ElMessage } from "element-plus";
import { submitType } from "./types";
import router from "../../router";
import { useStore } from "vuex";
let isShowChooseImg = ref(false);
let BlogList = ref<BlogListType[]>([]);
const store = useStore();
//微博总数
let blogCount = ref<number>(0);
//粉丝列表
let fansList = ref<FanslistType>({});
// 关注列表
let followingList = ref<followListType>({});
const { $api, $bus } =
  getCurrentInstance()!.appContext.config.globalProperties!;
const textarea = ref("");
const Chooimg = ref();
let hasFileList = ref<boolean>(false);
let currentPage = ref<number>(1);
let pageSize = ref<number>(5);
let fileList = ref<string[]>([]);
let disabledLoad = ref<boolean>(false);
let disabled = computed(() => {
  return textarea.value.trim() == "" ? true : false;
});
//获取选择的表情
const getEmoji = (emoji: { emoji: string }) => {
  textarea.value += emoji;
};
const closeChooseImg = (val: boolean) => {
  isShowChooseImg.value = val;
};
const handlerSuccess = (val: string[]) => {
  fileList.value = val;
};
const haveFile = (val: boolean) => {
  // console.log(val);
  hasFileList.value = val;
};
//发送创建微博请求
const createWeiboBlog = async (data: submitType) => {
  let res = await $api.blog.reqCreateBlog(data);
  // console.log(res.data);
  if (res.code == 200) {
    textarea.value = "";
    Chooimg.value?.resetFileList();
    getSquraeBlogList();
    router.go(0);
  }
};
//获取广场微博列表
const getSquraeBlogList = async (currentPage?: number, pageSize?: number) => {
  let res = await $api.blog.reqSquraeBlogList(currentPage, pageSize);
  if (res.code == 200) {
    blogCount.value = res.data.count;
    BlogList.value?.push(...res.data.blogList);
  }
};
//获取更多博客列表
const loadMoreBlog = debounce(() => {
  if (BlogList.value?.length == blogCount.value) {
    disabledLoad.value = true;
    ElMessage.error("到底了！");
    return;
  }
  currentPage.value++;
  getSquraeBlogList(currentPage.value, pageSize.value);
}, 300);
//发送图片请求
const submitBlog = () => {
  if (hasFileList.value) {
    Chooimg.value!.submitUpload();
  } else {
    createWeiboBlog({ content: textarea.value });
  }
};
//获取粉丝列表
const getFollowerList = async (id: number) => {
  let res = await $api.user.reqFollowUserList(id);
  if (res.code == 200) {
    fansList.value = res.data;
    store.commit("updateFansData", res.data);
  }
};
//获取关注列表
const getFollowingList = async (id: number) => {
  let res = await $api.user.reqFollowingList(id);
  if (res.code == 200) {
    followingList.value = res.data;
    store.commit("updateFollowingData", res.data);
  }
};
const getfansAndFollowing = () => {
  getFollowerList(store.state.userInfos.id);
  getFollowingList(store.state.userInfos.id);
};
const listenerScroll = () => {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  let bodyHeight = document.body.scrollHeight;
  let clientHeight = document.documentElement.clientHeight;
  if (clientHeight + scrollTop + 1 >= bodyHeight) {
    loadMoreBlog();
  } else if (scrollTop <= 0) {
    console.log("到顶了");
  }
};
onMounted(() => {
  // window.addEventListener("scroll", listenerScroll);
  getSquraeBlogList(currentPage.value, pageSize.value);
  getFollowerList(store.state.userInfos.id);
  getFollowingList(store.state.userInfos.id);
  $bus.on("getFansData", () => {
    getfansAndFollowing();
  });
});
onUnmounted(() => {
  // window.removeEventListener("scroll", listenerScroll);
  $bus.off("getFansData");
});
watch(
  () => fileList.value,
  (val: string[]) => {
    // console.log(val);
    createWeiboBlog({
      content: textarea.value,
      imageUrl: JSON.stringify(val),
    });
  }
);
</script>
<style lang="less" scoped>
.wirteArea {
  width: 100%;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  border-radius: 10px;
  .icon {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    cursor: pointer;
    // background-color: aqua;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: #fff2e5;

      i {
        color: #ff8200;
      }
    }

    .iconfont {
      font-size: 20px;
    }
  }
  .optionContain {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    .tools {
      display: flex;
    }
  }
}
.showBlog {
  margin-top: 20px;
}
</style>
